<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Resume</title>
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font/iconfont/iconfont.css">
    <script src="./js/index.js" async></script>
</head>

<body>
    <header id="resume-header">
        <div class="w" id="header-content">
            <h1 id="name-logo">Bocheng</h1>
            <ul class="anchor-list">
                <li class="anchor-item"><a href="#resume-self-intro">个人介绍</a></li>
                <li class="anchor-seperator"></li>
                <li class="anchor-item"><a href="#resume-project-intro">项目介绍</a></li>
                <li class="anchor-seperator"></li>
                <li class="anchor-item"><a href="#interact-part">给我留言</a></li>
            </ul>
            <div id="avatar">
                <img src="./img/avatar.jpg" alt="avatar-img">
            </div>
            <div class="zoom-out-avatar">
                <img src="./img/avatar.jpg" alt="avatar-img" class="zoom-out">
                <div class="mask"></div>
            </div>
        </div>
    </header>
    <div id="resume-banner" class="w">
        <h2>求职意向：前端工程师</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur possimus provident non voluptatem id dolor sed distinctio nihil mollitia aperiam repellat quisquam maiores cum, libero beatae? Inventore sunt maiores iste.</p>
        <address class="contact-info">
            <span><i class="iconfont icon-email">&nbsp;</i>1013889186@qq.com</span>
            <br>
            <span><i class="iconfont icon-phone">&nbsp;</i>18300000000</span>
            <br>
        </address>
    </div>
    <section id="resume-self-intro" class="w">
        <div id="skill-intro">
            <h3>技能掌握</h3>
            <ul class="skill-list">
                <li class="skill-item">
                    <span class="skill-name">JavaScript</span>
                    <span class="skill-mastery-bar"></span>
                </li>
                <li class="skill-item">
                    <span class="skill-name">HTML</span>
                    <span class="skill-mastery-bar"></span>
                </li>
                <li class="skill-item">
                    <span class="skill-name">CSS</span>
                    <span class="skill-mastery-bar"></span>
                </li>
                <li class="skill-item">
                    <span class="skill-name">Vue.js</span>
                    <span class="skill-mastery-bar"></span>
                </li>
                <li class="skill-item">
                    <span class="skill-name">webpack</span>
                    <span class="skill-mastery-bar"></span>
                </li>
                <li class="skill-item">
                    <span class="skill-name">less</span>
                    <span class="skill-mastery-bar"></span>
                </li>
                <li class="skill-item">
                    <span class="skill-name">jquery</span>
                    <span class="skill-mastery-bar"></span>
                </li>
            </ul>
        </div>
        <div id="self-intro">
            <nav class="tab-bar">
                <div class="tab-bar-item selected-tab-bar-item">教育经历</div>
                <div class="tab-bar-item">工作经历</div>
                <div class="tab-bar-item">获奖经历</div>
            </nav>
            <main class="self-content">
                <ul class="tab-bar-page selected-tab-bar-page" id="edu-experience">
                    <li class="experience-item">
                        <span class="experience-duration">2015-09 至 2018-06</span>
                        <p class="experience-intro">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptate minima saepe perferendis quod modi veniam sit, eligendi eveniet neque nostrum mollitia deleniti! Et doloribus illo animi quibusdam ab! Distinctio?
                        </p>
                    </li>
                    <li class="experience-item">
                        <span class="experience-duration">2018-09至今</span>
                        <p class="experience-intro">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptate minima saepe perferendis quod modi veniam sit, eligendi eveniet neque nostrum mollitia deleniti! Et doloribus illo animi quibusdam ab! Distinctio?
                        </p>
                    </li>
                </ul>
                <ul class="tab-bar-page" id="work-experience">
                    <li class="experience-item">
                        <span class="experience-duration">2021-07至今</span>
                        <p class="experience-intro">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam est dolor rem eius iste ratione aspernatur rerum aut, quasi nemo dolores explicabo sit saepe. Tempore eius autem nihil esse suscipit?
                        </p>
                    </li>
                </ul>
                <ul class="tab-bar-page" id="award-experience">
                    <li class="experience-item">
                        <span class="experience-duration">2021-07</span>
                        <p class="experience-intro">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facere dolores esse saepe? Error tempora pariatur non quod doloribus. Quod quisquam inventore suscipit fugit excepturi numquam pariatur maxime minus alias.
                        </p>
                    </li>
                </ul>
            </main>
        </div>
    </section>

    <section id="resume-project-intro">
        <div class="project-item">
            <div class="project-intro w">
                <div class="project-logo">
                    <img src="./img/logo.jpg" alt="project-logo">
                </div>
                <div class="project-info">
                    <div class="project-info-head">
                        <h3 class="project-title">项目标题</h3>
                        <span class="project-duration">项目时间</span>
                    </div>
                    <p class="project-role-play">
                        <span>项目角色</span>&nbsp;|&nbsp;<span>项目公司</span>
                    </p>
                    <p class="project-desc">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis adipisci tempora corrupti dolorem voluptas corporis aliquam natus ratione, magnam eius maxime nisi iste hic vel, minus labore fugiat provident ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias illo, aut ad voluptatibus esse facere provident nemo cum nobis eius ea natus necessitatibus alias voluptates praesentium pariatur quae, magni sunt.
                    </p>
                    <ul class="tech-tag">
                        <li class="tech-tag-item">技术tag1</li>
                        <li class="tech-tag-seperator"></li>
                        <li class="tech-tag-item">技术tag2</li>
                        <li class="tech-tag-seperator"></li>
                        <li class="tech-tag-item">技术tag3</li>
                    </ul>
                </div>
            </div>
            <div class="aside-project-demo-img">
                <img src="./img/logo.jpg" alt="project-demo">
            </div>
        </div>
        <div class="project-item">
            <div class="project-intro w">
                <div class="project-logo">
                    <img src="./img/logo-dark.jpg" alt="project-logo">
                </div>
                <div class="project-info">
                    <div class="project-info-head">
                        <h3 class="project-title">项目标题</h3>
                        <span class="project-duration">项目时间</span>
                    </div>
                    <p class="project-role-play">
                        <span>项目角色</span>&nbsp;|&nbsp;<span>项目公司</span>
                    </p>
                    <p class="project-desc">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis adipisci tempora corrupti dolorem voluptas corporis aliquam natus ratione, magnam eius maxime nisi iste hic vel, minus labore fugiat provident ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias illo, aut ad voluptatibus esse facere provident nemo cum nobis eius ea natus necessitatibus alias voluptates praesentium pariatur quae, magni sunt.
                    </p>
                    <ul class="tech-tag">
                        <li class="tech-tag-item">技术tag1</li>
                        <li class="tech-tag-seperator"></li>
                        <li class="tech-tag-item">技术tag2</li>
                        <li class="tech-tag-seperator"></li>
                        <li class="tech-tag-item">技术tag3</li>
                    </ul>
                </div>
            </div>
            <div class="aside-project-demo-img">
                <img src="./img/logo-dark.jpg" alt="project-demo">
            </div>
        </div>
        <div class="project-item">
            <div class="project-intro w">
                <div class="project-logo">
                    <img src="./img/logo.jpg" alt="project-logo">
                </div>
                <div class="project-info">
                    <div class="project-info-head">
                        <h3 class="project-title">项目标题</h3>
                        <span class="project-duration">项目时间</span>
                    </div>
                    <p class="project-role-play">
                        <span>项目角色</span>&nbsp;|&nbsp;<span>项目公司</span>
                    </p>
                    <p class="project-desc">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis adipisci tempora corrupti dolorem voluptas corporis aliquam natus ratione, magnam eius maxime nisi iste hic vel, minus labore fugiat provident ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias illo, aut ad voluptatibus esse facere provident nemo cum nobis eius ea natus necessitatibus alias voluptates praesentium pariatur quae, magni sunt.
                    </p>
                    <ul class="tech-tag">
                        <li class="tech-tag-item">技术tag1</li>
                        <li class="tech-tag-seperator"></li>
                        <li class="tech-tag-item">技术tag2</li>
                        <li class="tech-tag-seperator"></li>
                        <li class="tech-tag-item">技术tag3</li>
                    </ul>
                </div>
            </div>
            <div class="aside-project-demo-img">
                <img src="./img/logo.jpg" alt="project-demo">
            </div>
        </div>
    </section>
    
    <section id="interact-part" class="w">
        <ul id="intro-graphs">
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-1">
                <label for="like-btn-1" class="like-btn-click-area"></label>
            </li>
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-2">
                <label for="like-btn-2" class="like-btn-click-area"></label>
            </li>
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-3">
                <label for="like-btn-3" class="like-btn-click-area"></label>
            </li>
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-4">
                <label for="like-btn-4" class="like-btn-click-area"></label>
            </li>
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-5">
                <label for="like-btn-5" class="like-btn-click-area"></label>
            </li>
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-6">
                <label for="like-btn-6" class="like-btn-click-area"></label>
            </li>
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-7">
                <label for="like-btn-7" class="like-btn-click-area"></label>
            </li>
            <li class="intro-graphs-item">
                <img class="intro-graphs-poster" src="https://via.placeholder.com/150x180" alt="self-intro graphs">
                <p class="intro-graphs-info">information</p>
                <input type="checkbox" id="like-btn-8">
                <label for="like-btn-8" class="like-btn-click-area"></label>
            </li>
        </ul>
        <div id="message-board">
            <h3>留言板</h3>
            <ul class="message-list">
            </ul>
            <div class="comment-op">
                <textarea class="comment-content-area" placeholder="给我留言叭:) (限500字嚯)" maxlength="500"></textarea>
                <input type="text" class="comment-writer-name" placeholder="该怎么称呼您呀" maxlength="10">
                <button href="javascript:" class="sumbit-comment-btn">发表</button>
            </div>
        </div>
    </section>

    <footer id="resume-footer">
        <p>Copyright &copy; 2021 Bocheng</p>
    </footer>
</body>

</html>